<template>
	<view @tap="change" class="all" >
		<view class="title" >
			<view class="titleLeft">
				<view class="view" v-if="(pieceColor)" :style="{backgroundColor:pieceColor}"></view>
				<text class="text" :style="{color:color}">{{value}}</text>
				<view class="bubble" :style="{backgroundColor:pieceColor}" v-if="num>0">{{num}}</view>
			</view>
			<view class="titleRight">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		props: {
			//标题
			value: {
				type: String,
				default: '标题'
			},
			//文字颜色
			color: {
				type: String,
				default: '#333'
			},
			//色块颜色 默认空
			pieceColor: {
				type: String,
				default: ''
			},
			//数字气泡 0未空
			num: {
				type: Number,
				default: 0
			},
		},
		
		data() {
			return {

			};
		},
		
		methods: {
			change(e) {
				this.$emit('change', this.value)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.all {
		background:rgba(255,255,255,0.8);
		backdrop-filter: saturate(180%) blur(20px);
	}

	.bubble {
		margin-left: 20rpx;
		padding: 0rpx 10rpx;
		display: flex;
		font-size: 10px;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
		border-radius: 80rpx;
	}

	.title {

		display: flex;
		align-items: center;
		padding: 30rpx;
		.titleLeft{
			display: flex;
			flex: 1;
			.view {
				width: 10rpx;
				height: 40rpx;
				margin-right: 20rpx;
				border-radius: 5rpx;
			}
			.text {
				font-size: 16px;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		
	}
</style>
